

<template>
  <div style="display: inline-block;margin-left: 12px">
    <el-button type="primary" size="small" @click="goDictValue">查看字典值</el-button>
    <el-drawer
        :title="params.dicDisplay"
        :visible.sync="drawer"
        :size="1000"
    >
      <searchForm ref="searchForm" @on-search="onSearch"><addDictBtn :dicParentId="params.id" @after-op="getDicsByCriteria"></addDictBtn></searchForm>
      <div class="table">
        <el-table
            v-loading="loading"
            :header-cell-style="{background:'#F8F9FA'}"
            :data="tableData"
            :height="'calc(100% - 0px)'"
        >
          <el-table-column
              prop=""
              width="60"
              label="">
          </el-table-column>
          <el-table-column
              prop="dicValue"
              label="编码">
          </el-table-column>
          <el-table-column
              label="名称"
              prop="dicDisplay">
          </el-table-column>
          <el-table-column
              label="操作"
              prop="操作">
            <template slot-scope="scope">

                          <el-button type="danger" size="small" @click="handlerDelete(scope.row)">删除</el-button>
                          <editDictBtn @after-op="getDicsByCriteria" :params="scope.row"></editDictBtn>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @handleSizeChange="handleSizeChange"
                    @pageChange="pageChange"></pagination>
      </div>

    </el-drawer>
  </div>
</template>

<script>
import searchForm from './searchForm'
import pagination from "@/components/pagination";
import dict from "@/util/dict";
import addDictBtn from "@/views/systemManage/dict/module/addDictBtn";
import editDictBtn from "@/views/systemManage/dict/module/editDictBtn";
export default {
  name: "dictValuesBtn",
  props:{
    params:{
      default:()=>{}
    }
  },
  components:{
    searchForm,
    pagination,
    addDictBtn,
    editDictBtn
  },
  methods:{
    handlerDelete(row) {
      this.$confirm('此操作将删除该数据字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let params = {id: row.id}
        this.$api.delDics(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDicsByCriteria()
        })
      }).catch(() => {
      });

    },
    onSearch() {
      this.pageInfo.page = 1
      this.getDicsByCriteria()
    },
    pageChange(page){
      this.pageInfo.page = page
      this.getDicsByCriteria()
    },
    handleSizeChange(size){
      this.pageInfo.pageSize = size
      this.pageInfo.page = 1
      this.getDicsByCriteria()
    },
    goDictValue(){
      this.drawer = true
      this.$nextTick(()=>{
        this.getDicsByCriteria()
      })

    },
    getDicsByCriteria(){
      this.loading = true
      let params = {
        dicParentId:this.params.id,
        page:this.pageInfo.page-1,
        pageSize:this.pageInfo.pageSize,
        ...this.$refs.searchForm.form
      }
      this.$api.getDicsByCriteria(params).then(res=>{
        this.loading = false
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
      })
    },
  },
  data(){
    return {
      drawer:false,
      loading:false,
      pageInfo: {...dict.pageInfo},
      tableData:[],
    }
  },
}
</script>

<style scoped>
.table {
  padding: 10px;
  width: calc(100% - 30px);
  height: calc(100% - 160px);
}
</style>